<template>
  <div>
    <section class="section1">
      <div class="section1_top_content box_center">
        <div class="section1_top_content_ani animate_box">
          <div>
            <img class="img_wrap" src="https://s1.xiaomiev.com/activity-outer-assets/web/home/section1_2.png?x-fds-process=image/resize,q_90,f_webp" >
          </div>
          <strong class="leven2">{{ title }}</strong>
        </div>
      </div>
      <div>
        <img class="img"
          src="https://s1.xiaomiev.com/activity-outer-assets/web/home/section1.jpg?x-fds-process=image/resize,q_90,f_webp">
      </div>
      <nuxt-link class="su7_link" to="/su7">探索 Xiaomi SU7</nuxt-link>
    </section>
    <section class="section2">
      <div class="content">
        <div class="animate_box">
          <p v-for="(item, index) in section2" :key="index"> {{ item }} </p>
        </div>
        <img class="down animate_box" src="https://s1.xiaomiev.com/activity-outer-assets/web/common/arrow_bottom.png?x-fds-process=image/resize,q_90,f_webp">
      </div>
      <div>
        <img class="img" src="https://s1.xiaomiev.com/activity-outer-assets/web/home/section2.jpg?x-fds-process=image/resize,q_90,f_webp" alt="">
      </div>
    </section>
    <section class="section3">
      <div class="content animate_box">
        <div class="leven1">
          <p> Xiaomi HyperEngine </p>
        </div>
        <div class="leven2">
          <p> 小米超级电机 </p>
        </div>
        <div class="leven3">
          <p> 27200rpm 探索行业新巅峰， </p>
          <p> 献给以速度为信仰的你。 </p>
        </div>
        <nuxt-link class="a_link" to="/hyperengine">
          <img class="arrow_right" src="https://s1.xiaomiev.com/activity-outer-assets/web/common/circle_arrow_right.png?x-fds-process=image/resize,q_90,f_webp">
          <span>了解详情</span>
        </nuxt-link>
      </div>
      <div>
        <img class="img" src="https://s1.xiaomiev.com/activity-outer-assets/web/home/section3.jpg?x-fds-process=image/resize,q_90,f_webp" alt="">
      </div>
    </section>
    <section class="section4">
      <div class="content animate_box">
        <div class="leven1">
          <p> Xiaomi HyperCasting </p>
        </div>
        <div class="leven2">
          <p> 小米超级大压铸 </p>
        </div>
        <div class="leven3">
          <p> 9100t 超级大压铸集群， </p>
          <p> 汽车史上的又一次工业革命，为你开启。 </p>
        </div>
        <nuxt-link class="a_link" to="/hypercasting">
          <img class="arrow_right" src="https://s1.xiaomiev.com/activity-outer-assets/web/common/circle_arrow_right.png?x-fds-process=image/resize,q_90,f_webp">
          <span>了解详情</span>
        </nuxt-link>
      </div>
      <div>
        <img class="img" src="https://s1.xiaomiev.com/activity-outer-assets/web/home/section5.jpg?x-fds-process=image/resize,q_90,f_webp" alt="">
      </div>
    </section>
    <section class="section5">
      <div class="content animate_box">
        <div class="leven1">
          <p> Xiaomi Pilot </p>
        </div>
        <div class="leven2">
          <p> 小米全栈自研 </p>
          <p> 智能驾驶技术 </p>
        </div>
        <div class="leven3">
          <p> 坚持长期投入，AI 全面赋能。为你打造全场景下， </p>
          <p> 更聪明、更安全的智能驾驶。 </p>
        </div>
        <nuxt-link class="a_link" to="/pilot">
          <img class="arrow_right" src="https://s1.xiaomiev.com/activity-outer-assets/web/common/circle_arrow_right.png?x-fds-process=image/resize,q_90,f_webp">
          <span>了解详情</span>
        </nuxt-link>
      </div>
      <div>
        <img class="img" src="https://s1.xiaomiev.com/activity-outer-assets/web/home/section6.jpg?x-fds-process=image/resize,q_90,f_webp" alt="">
      </div>
    </section>
    <section class="section6">
      <div class="content animate_box">
        <div class="leven2">
          <p> 小米智能座舱 </p>
        </div>
        <div class="leven3">
          <p> 流畅的跨端互联，庞大的硬件生态， </p>
          <p> 打造「人车家全生态」操作系统。 </p>
        </div>
        <nuxt-link class="a_link" to="/smartcabin">
          <img class="arrow_right" src="https://s1.xiaomiev.com/activity-outer-assets/web/common/circle_arrow_right.png?x-fds-process=image/resize,q_90,f_webp">
          <span>了解详情</span>
        </nuxt-link>
      </div>
      <div>
        <img class="img" src="https://s1.xiaomiev.com/activity-outer-assets/web/home/section7.jpg?x-fds-process=image/resize,q_90,f_webp" alt="">
      </div>
    </section>
  </div>
</template>

<script>
export default {
  head() {
    return this.$setHead(this.head);
  },
  async asyncData({ $axios }) {
    const res = await $axios.get('/data/home.json');
    return {
      head: res.head,
      title: res.title,
      section2: res.section2,
    }
  }
};
</script>

<style scoped>
@import url('@/assets/css/home.css');
</style>